import { Table } from 'antd'
import React, { useState } from 'react'

export default function MyTable(props) {
    const { loading, dataSource, columns, total, params, pageSize, onChange } = props

    const [pageOption, setPageOption] = useState({ current: 1, pageSize })
    const pageSizeOptions = [pageSize, 20, 30, 50, 100, 500]

    const handlePaginationChange = (current, pageSize) => {
        setPageOption({ current, pageSize })
    }

    const handlePageChange = (flag) => {
        if (flag) {
            setPageOption({ current: pageOption.current + 1 })
        } else {
            setPageOption({ current: pageOption.current - 1 })
        }
    }

    const itemRender = (_, type, originalElement) => {
        if (type === 'prev') {
            return <div onClick={() => handlePageChange(0)}>{'<'}</div>;
        }
        if (type === 'next') {
            return <div onClick={() => handlePageChange(1)}>{'>'}</div>;
        }
        // console.log(originalElement);
        // // 更改分页器样式
        // const locale = originalElement._owner?.pendingProps?.locale
        // if (locale) {
        //     locale['jump_to'] = "前往"
        //     locale['items_per_page'] = "条/ 页"
        //     locale['page'] = "页"
        // }
        return originalElement;
    };

    const paginationProps = {
        showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} 条`,
        total: total,
        current: pageOption.current,
        pageSize: pageOption.pageSize,
        pageSizeOptions,
        showQuickJumper: true,
        showSizeChanger: true,
        showLessItems: true,
        responsive: true,
        itemRender,
        onChange: (current, size) => handlePaginationChange(current, size)
    }


    return (
        <Table
            {...params}
            loading={loading}
            columns={columns}
            dataSource={dataSource}
            pagination={paginationProps}
            rowKey={(item) => item.id}
            onChange={onChange}
        />
    )
}